<template>
	<view>
		<z-paging ref="paging" :refresher-only="false" :use-refresher-status-bar-placeholder="false">
			<template #top>
				<view class="menu-list flex item-center">
					<view class="menu-item" v-for="item in menuList" :key="item.id"
						:class="{'active':menuId == item.id}" @click="selMenu(item)">
						{{item.name}}
						<view class="sel-line" v-if="menuId == item.id"></view>
					</view>
				</view>
				<view v-if="menuId == 1" class="all-item flex item-center">
					<view v-for="allItem in allMenuList" :key="allItem.id" class="all-btn"
						:class="{'active':selMenuId == allItem.id}" @click="allSelMenu(allItem)">{{allItem.name}}</view>
				</view>
			</template>
			<view class="core-data-box">
				<view class="core-data-title" v-if="menuId == 1">
					{{selMenuId==1?'核心数据':selMenuId==2?'交易数据':'用户数据'}}
				</view>
				<view class="core-data-title" v-else>
					{{menuId==2?'自卖数据':'分销数据'}}
				</view>
				<view class="day-box flex item-center">
					<view class="day-title">时间类型：</view>
					<view v-for="dayItem in dayList" :key="dayItem.id" class="day-btn"
						:class="{'active':coreId == dayItem.id}" @click="selDay(dayItem)">{{dayItem.name}}</view>
					<view class="day-btn" :class="{'active':coreId == 4}">
						<uni-datetime-picker v-model="range" type="daterange" :start="start" :end="end" @change="timeChange($event,'core')">
							自定义
						</uni-datetime-picker>
					</view>

				</view>
				<view v-if="menuId == 1" class="flex flex-wrap">
					<templat v-for=" item in coreShowList" :key="item.key" style="width: 50%;">
						<view class="core-dec" v-if="item.menuIds.includes(selMenuId)">
							<view class="core-dec-title">{{item.name}}</view>
							<view class="core-dec-data" v-if="coreDataList">{{coreDataList[item.key]}}</view>
						</view>
					</templat>
				</view>
				<view v-if="menuId == 3" class="flex flex-wrap">
					<templat v-for=" item in agentList" :key="item.key" style="width: 50%;">
						<view class="core-dec">
							<view class="core-dec-title">{{item.name}}</view>
							<view class="core-dec-data" v-if="coreDataList">{{coreDataList[item.key]}}</view>
						</view>
					</templat>
				</view>

				<view v-if="menuId == 2" class="flex flex-wrap">
					<templat style="width: 50%;">
						<view class="core-dec">
							<view class="core-dec-title">自卖订单数</view>
							<view class="core-dec-data" v-if="coreDataList">{{coreDataList['totalOrderNum']}}</view>
						</view>
					</templat>
					<templat style="width: 50%;">
						<view class="core-dec">
							<view class="core-dec-title">自卖退款订单数(元)</view>
							<view class="core-dec-data" v-if="coreDataList">{{coreDataList['refundOrderNum']}}</view>
						</view>
					</templat>
					<templat style="width: 50%;">
						<view class="core-dec">
							<view class="core-dec-title">自卖退款订单数</view>
							<view class="core-dec-data" v-if="coreDataList">{{coreDataList['refundOrderNum']}}</view>
						</view>
					</templat>
					<templat style="width: 50%;">
						<view class="core-dec">
							<view class="core-dec-title">自卖退款金额(元)</view>
							<view class="core-dec-data" v-if="coreDataList">{{coreDataList['refundOrderAmt']}}</view>
						</view>
					</templat>
				</view>
			</view>
			<view class="core-data-box" style="margin-top: 10px;">
				<view class="core-data-title" v-if="menuId == 1">
					{{selMenuId==1?'核心数据趋势':selMenuId==2?'交易数据趋势':'用户数据趋势'}}
				</view>
				<view class="core-data-title" v-else>
					{{menuId==2?'自卖数据趋势':'分销数据趋势'}}
				</view>
				<view class="day-box flex item-center">
					<view class="day-title">
						数据类型：
					</view>
					<view @click="openPop('open')" class="flex item-center">
						{{getTypeText()}}
						<image src="@/static/svg/icon-arrow-right.svg" mode="widthFix" class="icon-arrow-right"></image>
					</view>
				</view>
				<view class="day-box flex item-center">
					<view class="day-title">时间类型：</view>
					<view v-for="dayItem in dayList" :key="dayItem.id" class="day-btn"
						:class="{'active':trendId == dayItem.id}" @click="selTrendDay(dayItem)">{{dayItem.name}}</view>
					<view class="day-btn" :class="{'active':trendId == 4}">
						<uni-datetime-picker v-model="trendRange" type="daterange" :start="start" :end="end" @change="timeChange($event,'trend')">
							自定义
						</uni-datetime-picker>
					</view>

				</view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :canvas2d="true"/>
				</view>
			</view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" type="bottom">
				<view class="pop-page">
					<z-paging ref="paging" :refresher-only="false" :use-refresher-status-bar-placeholder="false">
						<template #top>
							<view class="pop-title-box flex item-center justify-between">
								<view class="pop-title">
									数据类型
								</view>
								<image src="@/pagesD/static/icon-blockDelete.png" mode="widthFix"
									class="icon-blockDelete" @click="openPop('close')"></image>
							</view>
						</template>

						<view class="inner-box"  v-if="menuId == 1">
							<view v-if="selMenuId==1" v-for="it in trendType" :key="it.text" :class="{'active':it.value == dataType}"
								class="agent-item flex item-center justify-between" @click="selDataType(it)">
								<text>{{it.text}}</text>
								<image v-if="it.value == dataType" src="@/static/svg/radio-checked.svg" mode="widthFix"
									class="radio-checked"></image>
							</view>
							
							<view v-if="selMenuId==2" v-for="it in tradeType" :key="it.text" :class="{'active':it.value == dataType}"
								class="agent-item flex item-center justify-between" @click="selDataType(it)">
								<text>{{it.text}}</text>
								<image v-if="it.value == dataType" src="@/static/svg/radio-checked.svg" mode="widthFix"
									class="radio-checked"></image>
							</view>
							
							<view v-if="selMenuId==3" v-for="it in userType" :key="it.text" :class="{'active':it.value == dataType}"
								class="agent-item flex item-center justify-between" @click="selDataType(it)">
								<text>{{it.text}}</text>
								<image v-if="it.value == dataType" src="@/static/svg/radio-checked.svg" mode="widthFix"
									class="radio-checked"></image>
							</view>
							
						</view>
						<view v-else>
							<view v-if="menuId == 3" v-for="it in agentType" :key="it.text" :class="{'active':it.value == dataType}"
								class="agent-item flex item-center justify-between" @click="selDataType(it)">
								<text>{{it.text}}</text>
								<image v-if="it.value == dataType" src="@/static/svg/radio-checked.svg" mode="widthFix"
									class="radio-checked"></image>
							</view>
							<view v-if="menuId == 2" v-for="it in sellType" :key="it.text" :class="{'active':it.value == dataType}"
								class="agent-item flex item-center justify-between" @click="selDataType(it)">
								<text>{{it.text}}</text>
								<image v-if="it.value == dataType" src="@/static/svg/radio-checked.svg" mode="widthFix"
									class="radio-checked"></image>
							</view>
						</view>
					</z-paging>
				</view>
			</uni-popup>
		</z-paging>

	</view>
</template>

<script setup>
	import qiunDataCharts from '../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import dayjs from 'dayjs'
	import {
		getAgentData,
		getAgentDataTrend,
		getAllData,
		getAllDataTrade,
		getAllDataTradeTrend,
		getAllDataTrend,
		getAllDataUser,
		getAllDataUserTrend,
		getSellData,
		getSellDataTrend
	} from '@/pagesI/api/statistics.js'
	const start = ref()
	const end = ref()
	end.value = new Date(new Date().getTime())
	start.value = new Date(new Date().getTime() - 90*24*60*60*1000)
	end.value = dayjs(end.value).format('YYYY-MM-DD') // '25/01/2019'
	start.value = dayjs(start.value).format('YYYY-MM-DD') // '25/01/2019'
	// 分销数据 类型：1-分销订单金额，2-分销订单数，3-分销退款金额，4-分销退款订单数，5-新增经纪人数，6-分销佣金支出
	// 交易数据 类型：1-总订单金额，2-总订单数，3-总下单人数，4-已结算补贴金额，5-退款订单数，6-退款金额，7-已结算佣金
	// 概况数据 类型：1-总订单金额，2-总订单数，3-总下单人数，4-已结算补贴金额，5-浏览人数，6-浏览次数，7-下单新用户，8-退款金额
	// 用户数据 类型：1-总下单人数，2-浏览人数，3-浏览次数，4-分享人数，5-新增订阅人数，6-累计订阅人数
	// 自卖数据 类型：1-自卖订单金额，2-自卖订单数，3-自卖退款金额，4-自卖退款订单数
	// 分销数据
	const agentType = ref([{
			text: '分销订单金额',
			value: 1
		},
		{
			text: '分销订单数',
			value: 2
		},
		{
			text: '分销退款金额',
			value: 3
		},
		{
			text: '分销退款订单数',
			value: 4
		},
		{
			text: '新增经纪人数',
			value: 5
		},
		{
			text: '分销佣金支出',
			value: 6
		}
	])
	// 交易数据
	const tradeType = ref([{
			text: '总订单金额',
			value: 1
		},
		{
			text: '总订单数',
			value: 2
		},
		{
			text: '总下单人数',
			value: 3
		},
		{
			text: '已结算补贴金额',
			value: 4
		},
		{
			text: '退款订单数',
			value: 5
		},
		{
			text: '退款金额',
			value: 6
		},
		{
			text: '已结算佣金',
			value: 7
		}
	])
	// 概况数据
	const trendType = ref([{
			text: '总订单金额',
			value: 1
		},
		{
			text: '总订单数',
			value: 2
		},
		{
			text: '总下单人数',
			value: 3
		},
		{
			text: '已结算补贴金额',
			value: 4
		},
		{
			text: '浏览人数',
			value: 5
		},
		{
			text: '浏览次数',
			value: 6
		},
		{
			text: '下单新用户',
			value: 7
		},
		{
			text: '退款金额',
			value: 8
		}
	])
	const userType = ref([{
			text: '总下单人数',
			value: 1
		},
		{
			text: '浏览人数',
			value: 2
		},
		{
			text: '浏览次数',
			value: 3
		},
		{
			text: '分享人数',
			value: 4
		},
		{
			text: '新增订阅人数',
			value: 5
		},
		{
			text: '累计订阅人数',
			value: 6
		}
	])
	const sellType = ref([{
			text: '自卖订单金额',
			value: 1
		},
		{
			text: '自卖订单数',
			value: 2
		},
		{
			text: '自卖退款金额',
			value: 3
		},
		{
			text: '自卖退款订单数',
			value: 4
		}
	])
	const popup = ref(null)
	const trendId = ref(1)
	const show = ref(false)
	const opts = ref({
		color: ["#FA4543", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 15],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			labelCount: 10
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: "hollow"
			}
		}
	})
	const chartData = ref({})
	const menuList = ref([{
		name: '全部',
		id: 1
	}, {
		name: '自卖数据',
		id: 2
	}, {
		name: '分销数据',
		id: 3
	}])
	const allMenuList = ref([{
		name: '概况',
		id: 1
	}, {
		name: '交易',
		id: 2
	}, {
		name: '用户',
		id: 3
	}, ])
	const dayList = ref([{
			name: '今日',
			id: 1
		},
		{
			name: '本周',
			id: 2
		},
		{
			name: '本月',
			id: 3
		}
		// {
		// 	name: '自定义',
		// 	id: 4
		// }
	])
	const menuId = ref(1)
	const selMenuId = ref(1)
	const coreId = ref(1)
	const dataType = ref(1)
	const allCoreData = ref([{
			name: '总订单金额(元)',
			key: 'totalOrderAmt',
			menuIds: [1, 2]
		},
		{
			name: '总订单数',
			key: 'totalOrderNum',
			menuIds: [1, 2]
		},
		{
			name: '总下单人数',
			key: 'totalOrderUserNum',
			menuIds: [1, 2, 3]
		},
		{
			name: '已结算补贴金额(元)',
			key: 'totalSubsidyAmt',
			menuIds: [1, 2]
		},
		{
			name: '浏览人数',
			key: 'browseUserNum',
			menuIds: [1, 3]
		},
		{
			name: '浏览次数',
			key: 'browseNum',
			menuIds: [1, 3]
		},
		{
			name: '下单新用户',
			key: 'newOrderUserNum',
			menuIds: [1]
		},
		{
			name: '退款订单数',
			key: 'refundOrderNum',
			menuIds: [2]
		},
		{
			name: '退款金额(元)',
			key: 'refundOrderAmt',
			menuIds: [1, 2]
		},
		{
			name: '已结算佣金(元)',
			key: 'commissionAmt',
			menuIds: [2]
		},
		{
			name: '分享人数',
			key: 'shareUserNum',
			menuIds: [3]
		},
		{
			name: '新增订阅人数',
			key: 'newSubscribeUserNum',
			menuIds: [3]
		},
		{
			name: '累计订阅人数',
			key: 'totalSubscribeUserNum',
			menuIds: [3]
		},
	])
	const agentList = ref([{
			name: '分销订单数',
			key: 'totalOrderNum'
		},
		{
			name: '分销订单金额',
			key: 'totalOrderAmt'
		},
		{
			name: '分销退款订单数',
			key: 'refundOrderNum'
		},
		{
			name: '分销退款金额',
			key: 'refundOrderAmt'
		},
		{
			name: '新增经纪人数',
			key: 'newAgentUserNum'
		},
		{
			name: '已结算佣金',
			key: 'commissionAmt'
		}
	])
	const coreShowList = ref([])
	const coreDataList = ref({})
	// const chartData = ref({})
	const range = ref([])
	const trendRange = ref([])
	const getList = async () => {
		let result = null
		let params = {
			dateType: coreId.value
		}
		if (coreId.value == 4) {
			params.startTime = range.value[0]
			params.endTime = range.value[1]
		}
		if (menuId.value == 1) {
			if (selMenuId.value == 1) {
				result = await getAllData(params)
			} else if (selMenuId.value == 2) {
				result = await getAllDataTrade(params)
			} else if (selMenuId.value == 3) {
				result = await getAllDataUser(params)
			}
		} else if (menuId.value == 2) {
			result = await getSellData(params)
		} else if (menuId.value == 3) {
			result = await getAgentData(params)
		}
		if (result) {
			coreDataList.value = result
		} else {
			coreDataList.value = {}
		}
	}
	const getTrendList = async () => {
		let result = null
		let params = {
			dateType: trendId.value,
			type: dataType.value
		}
		if (trendId.value == 4) {
			params.startTime = trendRange.value[0]
			params.endTime = trendRange.value[1]
		}
		if (menuId.value == 1) {
			if (selMenuId.value == 1) {
				result = await getAllDataTrend(params)
			} else if (selMenuId.value == 2) {
				result = await getAllDataTradeTrend(params)
			} else if (selMenuId.value == 3) {
				result = await getAllDataUserTrend(params)
			}
		} else if (menuId.value == 2) {
			result = await getSellDataTrend(params)
		} else if (menuId.value == 3) {
			result = await getAgentDataTrend(params)
		}
		if (result) {
			let cateGories = []
			let data = []
			result.forEach(item => {
				cateGories.push(item.date)
				data.push(Number(item.value))
			})
			let res = {
				categories: cateGories,
				series: [{
					name: "",
					data: data
				}]
			};
			chartData.value = res
			opts.value.xAxis.labelCount = trendId.value == 1 ? 10 : trendId.value == 2 ? 5 : 4
			// trendDataList.value = result
		} else {
			// trendDataList.value = {}
		}
	}
	const allSelMenu = (item) => {
		selMenuId.value = item.id
		dataType.value = 1
		getShowList()
		getList()
		getTrendList()
	}
	const selDataType = (it) => {
		dataType.value = it.value
		getTrendList()
		openPop('close')
	}
	const getShowList = () => {
		coreShowList.value = allCoreData.value.filter(it => it.menuIds.includes(selMenuId.value))
	}
	const selMenu = (item) => {
		menuId.value = item.id
		dataType.value = 1
		getList()
		getTrendList()
	}
	const selDay = (day) => {
		coreId.value = day.id
		getList()
	}
	const selTrendDay = (day) => {
		trendId.value = day.id
		getTrendList()
	}
	const timeChange = (e, type) => {
		// console.log(e,'eee',range.value)
		if (type == 'core') {
			coreId.value = 4
			getList()
		} else {
			trendId.value = 4
			getTrendList()
		}

	}
	const getTypeText = () => {
		let result = []
		if (menuId.value == 1) {
			if (selMenuId.value == 1) {
				result = trendType.value
			} else if (selMenuId.value == 2) {
				result = tradeType.value
			} else if (selMenuId.value == 3) {
				result = userType.value
			}
		} else if (menuId.value == 2) {
			result = sellType.value
		} else if (menuId.value == 3) {
			result = agentType.value
		}
		let text = ''
		result.forEach(item => {
			if (item.value == dataType.value) {
				text = item.text
			}
		})
		return text
	}
	const openPop = (type) => {
		// console.log(popup.value,'popup.value')
		if (type == 'open') {
			popup.value && popup.value.open('bottom')
		} else {
			popup.value && popup.value.close('bottom')
		}
	}
	onMounted(() => {
		getList()
		getShowList()
		setTimeout(()=>{getTrendList()},500)
	})
</script>

<style lang="scss" scoped>
	.menu-list {
		background-color: #ffffff;
		padding: 10px 0 0 0;
		border-bottom: 1px solid rgba(245, 245, 245, 1);

		.menu-item {
			width: 33.3%;
			text-align: center;
			position: relative;
			font-size: 16px;
			font-weight: 400;
			line-height: 22px;
			height: 30px;
			color: rgba(51, 51, 51, 0.6);

			&.active {
				color: rgba(51, 51, 51, 1);
			}

			.sel-line {
				position: absolute;
				width: 19px;
				height: 4px;
				background: rgba(250, 69, 67, 1);
				border-radius: 4px;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}

	.all-btn {
		// width: 52px;
		height: 28px;
		padding: 4px 12px;
		border-radius: 8px;
		font-size: 14px;
		color: rgba(51, 51, 51, 0.6);
		background: rgba(245, 245, 245, 1);
		border: 1px solid rgba(245, 245, 245, 1);
		margin-left: 20px;

		&.active {
			border: 1px solid rgba(250, 69, 67, 1);
			color: rgba(250, 69, 67, 1);
			background-color: rgba(255, 238, 238, 1);
		}
	}

	.all-item {
		background-color: #ffffff;
		padding: 6px 0px;
		border-bottom: 1px solid rgba(245, 245, 245, 1);
	}

	.core-data-box {
		background-color: #ffffff;

		.core-data-title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 600;
			line-height: 22px;
			color: rgba(51, 51, 51, 1);
			padding: 20px;
			border-bottom: 1px solid rgba(245, 245, 245, 1);
		}
	}

	.day-box {
		padding: 10px 20px;
		border-bottom: 1px solid rgba(245, 245, 245, 1);

		.day-title {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			color: rgba(51, 51, 51, 0.6);
		}
	}

	.day-btn {
		height: 28px;
		padding: 4px 4px;
		border-radius: 8px;
		font-size: 14px;
		color: rgba(51, 51, 51, 0.6);
		background: rgba(245, 245, 245, 1);
		// border: 1px solid rgba(245, 245, 245, 1);
		margin-left: 6px;

		&.active {
			// border: 1px solid rgba(250, 69, 67, 1);
			color: rgba(250, 69, 67, 1);
			background-color: rgba(255, 238, 238, 1);
		}
	}

	.core-dec {
		box-sizing: border-box;
		padding: 12px 0 12px 10px;
		border-bottom: 1px solid rgba(245, 245, 245, 1);
		width: 100%;

		&:nth-child(2n-1) {
			border-right: 1px solid rgba(245, 245, 245, 1);
		}
	}

	.core-dec-title {
		font-family: PingFang SC;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(51, 51, 51, 0.6);
		margin-bottom: 10px;
	}

	.core-dec-data {
		color: rgba(51, 51, 51, 1);
		font-size: 18px;
		font-weight: 600;
		line-height: 25px;
	}

	.charts-box {
		width: 100%;
		height: 300px;
		margin-bottom: 20px;
	}

	.icon-arrow-right {
		width: 14px;
		rotate: 90deg;
	}

	.pop-page {
		background-color: #ffffff;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		height: 400px;
		box-sizing: border-box;
		padding: 14px;

		.pop-title-box {
			padding: 10px 20px;
		}

		.pop-title {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 600;
			line-height: 22px;
			color: #333333;
		}

		.icon-blockDelete {
			width: 32px;
		}

		.radio-checked {
			width: 18px;
		}

		.agent-item {
			padding: 10px 26px 10px 20px;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
			color: rgba(51, 51, 51, 0.6);
			border-top: 1px solid rgba(247, 247, 247, 1);	
			&.active {
				color: rgba(250, 69, 67, 1);
			}
		}
	}
</style>